<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" :fullscreen="true">
		<el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmitHandle()"
			label-width="120px">
			<el-form-item prop="name" label='名称'>
				<el-input v-model="dataForm.name" placeholder='名称'></el-input>
			</el-form-item>
			<el-form-item prop="parentName" label='上级部门' class="dept-list">
				<el-popover v-model:visible="deptListVisible" placement="bottom-start" trigger="click">
					<template #reference>
						<el-input v-model="dataForm.parentName" :readonly="true" placeholder='上级部门'>
							<i v-if="superAdmin === 1 && dataForm.pid !== '0'" slot="suffix"
								@click.stop="deptListTreeSetDefaultHandle()"
								class="el-icon-circle-close el-input__icon">
							</i>
						</el-input>
					</template>
					<el-tree :data="deptList" :props="{ label: 'name', children: 'children' }" node-key="id"
						ref="deptListTree" :highlight-current="true" :expand-on-click-node="false" accordion
						@current-change="deptListTreeCurrentChangeHandle">
					</el-tree>
				</el-popover>

			</el-form-item>
			<el-form-item prop="sort" label="排序">
				<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label='排序'>
				</el-input-number>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消 </el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		getDeptLists,
		getDeptById,
		postDept,
		putDept
	} from '@/network/sys/dept'
	import {
		ElMessage
	} from 'element-plus';

	import {
		useStore
	} from 'vuex';
	export default {

		name: "FnAddOrUpdateComponent",
		emits: ['refresh-data-list'],


		setup(pros, {
			emit
		}) {
			const store = useStore();

			const visible = ref(false)
			const deptList = ref([])
			const deptListVisible = ref(false)
			const dataForm = ref({
				id: '',
				name: '',
				pid: '',
				parentName: '',
				sort: 0
			})


			const superAdmin = computed(() => {
				return store.state.DUser.superAdmin;
			})

			const dataRule = ref({
				name: [{
					required: true,
					message: 'validate.required',
					trigger: 'blur'
				}],
				parentName: [{
					required: true,
					message: 'validate.required',
					trigger: 'change'
				}]
			})

			const dataFormRef = ref(null);
			const deptListTreeRef = ref(null)
			const init = () => {
				visible.value = true;
				nextTick(() => {
					dataFormRef.value.resetFields();
					getDeptList().then(() => {
						if (dataForm.value.id) {
							getInfo();
						} else if (superAdmin.value === 1) {
							deptListTreeSetDefaultHandle();
						}
					});
				});
			}
			// 获取部门列表
			const getDeptList = () => {
				return getDeptLists().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					deptList.value = res.data;
				}).catch(function() {});
			}
			// 获取信息
			const getInfo = () => {
				getDeptById(dataForm.value.id).then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					dataForm.value = _.merge({}, dataForm.value, res.data);
					if (dataForm.value.pid === '0') {
						return deptListTreeSetDefaultHandle();
					}
					deptListTree.value.setCurrentKey(dataForm.value.pid);
				}).catch(function() {});
			}
			// 上级部门树, 设置默认值
			const deptListTreeSetDefaultHandle = () => {
				dataForm.value.pid = '0';
				dataForm.value.parentName = '一级部门';
			}
			// 上级部门树, 选中
			const deptListTreeCurrentChangeHandle = (data) => {
				dataForm.value.pid = data.id;
				dataForm.value.parentName = data.name;
				deptListVisible.value = false;
			}
			// 表单提交
			const dataFormSubmitHandle = _.debounce(() => {
				dataFormRef.value.validate((valid) => {
					if (!valid) {
						return false;
					}
					(() => {
						return !dataForm.value.id ? postDept(dataForm.value) : putDept(
							dataForm.value)
					})().then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								visible.value = false;
								emit('refresh-data-list');
							}
						});
					}).catch(function() {});
				});
			}, 1000, {
				'leading': true,
				'trailing': false
			})


			return {
				visible,
				deptList,
				deptListVisible,
				dataForm,
				superAdmin,
				dataRule,
				dataFormRef,
				deptListTreeRef,
				init,
				getDeptList,
				getInfo,
				deptListTreeSetDefaultHandle,
				deptListTreeCurrentChangeHandle,
				dataFormSubmitHandle
			}
		}













		// data: function () {
		//     return {
		//         visible: false,
		//         deptList: [],
		//         deptListVisible: false,
		//         dataForm: {
		//             id: '',
		//             name: '',
		//             pid: '',
		//             parentName: '',
		//             sort: 0
		//         }
		//     }
		// },
		// computed: {
		//     superAdmin: function () {
		//         return window.parent.vm.user.superAdmin;
		//     },
		//     dataRule: function () {
		//         return {
		//             name: [
		//                 { required: true, message: 'validate.required', trigger: 'blur' }
		//             ],
		//             parentName: [
		//                 { required: true, message: 'validate.required', trigger: 'change' }
		//             ]
		//         }
		//     }
		// },
		// beforeCreate: function() {
		// 	self = this;
		// },
		// methods: {
		// 	init: function() {
		// 		self.visible = true;
		// 		self.$nextTick(function() {
		// 			self.$refs['dataForm'].resetFields();
		// 			self.getDeptList().then(function() {
		// 				if (self.dataForm.id) {
		// 					self.getInfo();
		// 				} else if (self.superAdmin === 1) {
		// 					self.deptListTreeSetDefaultHandle();
		// 				}
		// 			});
		// 		});
		// 	},
		// 	// 获取部门列表
		// 	getDeptList: function() {
		// 		return self.$http.get('/sys/dept/list').then(function(res) {
		// 			if (res.data.code !== 0) {
		// 				return self.$message.error(res.data.msg);
		// 			}
		// 			self.deptList = res.data.data;
		// 		}).catch(function() {});
		// 	},
		// 	// 获取信息
		// 	getInfo: function() {
		// 		self.$http.get('/sys/dept/' + self.dataForm.id).then(function(res) {
		// 			if (res.data.code !== 0) {
		// 				return self.$message.error(res.data.msg);
		// 			}
		// 			self.dataForm = _.merge({}, self.dataForm, res.data.data);
		// 			if (self.dataForm.pid === '0') {
		// 				return self.deptListTreeSetDefaultHandle();
		// 			}
		// 			self.$refs.deptListTree.setCurrentKey(self.dataForm.pid);
		// 		}).catch(function() {});
		// 	},
		// 	// 上级部门树, 设置默认值
		// 	deptListTreeSetDefaultHandle: function() {
		// 		self.dataForm.pid = '0';
		// 		self.dataForm.parentName = '一级部门';
		// 	},
		// 	// 上级部门树, 选中
		// 	deptListTreeCurrentChangeHandle: function(data) {
		// 		self.dataForm.pid = data.id;
		// 		self.dataForm.parentName = data.name;
		// 		self.deptListVisible = false;
		// 	},
		// 	// 表单提交
		// 	dataFormSubmitHandle: _.debounce(function() {
		// 		self.$refs['dataForm'].validate(function(valid) {
		// 			if (!valid) {
		// 				return false;
		// 			}
		// 			self.$http[!self.dataForm.id ? 'post' : 'put']('/sys/dept', self.dataForm).then(
		// 				function(res) {
		// 					if (res.data.code !== 0) {
		// 						return self.$message.error(res.data.msg);
		// 					}
		// 					self.$message({
		// 						message: '操作成功',
		// 						type: 'success',
		// 						duration: 500,
		// 						onClose: function() {
		// 							self.visible = false;
		// 							self.$emit('refresh-data-list');
		// 						}
		// 					});
		// 				}).catch(function() {});
		// 		});
		// 	}, 1000, {
		// 		'leading': true,
		// 		'trailing': false
		// 	})
		// }
	}
</script>

<style scoped>

</style>
